<template>
  <div class="mineSetting">
    <page-loading v-model="loadingStatus"></page-loading>
    <u-nav-bar :title="'设置'" />
    <div class="mineSetting__ct">
      <div class="item" v-for="item in settingList" :key="item.id" @click="handleSettingClick(item)">
        <div class="title">{{ item.title }}</div>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import { Icon } from 'vant'
import uNavBar from '@/components/NavBar.vue'
import { useRouter } from 'vue-router'
import store from '@/store/index'
import { UserInfo, FinanceWallet } from '@/store/user/types'
import jsBridge from '@/utils/jsBridge'
import { Toast } from 'vant'
import PageLoding from '@/components/PageLoading.vue'
import { NATIVE_TYPE } from '@/type'

type SettingItem = {
  title: string
  routerName?: string
  id: number
}

type MineSetting = {
  settingList: SettingItem[]
  [propname: string]: any
}

export default defineComponent({
  name: 'MineSetting',
  components: {
    'u-nav-bar': uNavBar,
    'van-icon': Icon,
    'page-loading': PageLoding
  },
  setup() {
    const data = reactive<MineSetting>({
      settingList: [
        {
          id: 2,
          title: '运输协议',
          routerName: 'TransportServicesAgreement'
        },
        {
          id: 3,
          title: '隐私协议',
          routerName: 'PrivacyAgreement'
        },
        {
          id: 4,
          title: '意见反馈',
          routerName: 'Feedback'
        },
        // {
        //   id: 5,
        //   title: '联系客服'
        //   // routerName: 'ContactCustomer',
        // },
        {
          id: 6,
          title: '清除缓存'
        },
        {
          id: 9,
          title: '投诉',
          routerName: 'ComplaintList'
        },
        {
          id: 7,
          title: '关于我们',
          routerName: 'AboutUs'
        },
        {
          id: 8,
          title: '注销账户',
          routerName: 'CloseAccount'
        }
      ]
    })

    const loadingStatus = ref<boolean>(false)

    /** 事件专区 */
    const router = useRouter()

    //清除缓存
    const clearCache = () => {
      Toast.success('缓存清除成功')
      jsBridge.jsCallNative(NATIVE_TYPE.CLEAR_CACHE, {})
    }

    // 点击设置选项
    const handleSettingClick = (item: SettingItem): void => {
      item.routerName && router.push({ name: item.routerName })
      switch (item.id) {
        case 5:
          window.location.href = 'tel:400-835-8305'
          break
        case 6:
          if (process.env.VUE_APP_MODE === 'prod') {
            loadingStatus.value = true
            setTimeout(() => {
              loadingStatus.value = false
              Toast.success('清除成功')
            }, 3000)
          } else {
            clearCache()
          }
          break
        default:
          break
      }
    }

    // 去认证
    const goValidate = (): void => {
      router.push({ name: 'Certificates' })
    }

    /** 操作区域 */

    return {
      ...toRefs(data),
      handleSettingClick,
      loadingStatus
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.mineSetting {
  @include flex-cloumn-width-height-100;
  background-color: $background-color-base;
  &__ct {
    @include flex-scroll-content-pd(24px 12px 0 12px);
    .item {
      width: 100%;
      background: white;
      height: 60px;
      border-radius: 8px;
      box-shadow: 0px 6px 14px 0px rgba(221, 221, 221, 0.15);
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 12px;
      margin-bottom: 12px;
      cursor: pointer;
      .title {
        font-size: 14px;
        color: #101736;
      }
      .icon {
        font-size: 8px;
        color: #575c72;
      }
    }
  }
}
</style>
